<template>
    <div id="players">
        <div v-if="tableData !== ''">
            <div class="fl courseName">
                <el-form :inline="true" :model="form" class="fl">
                    <el-form-item label="关键字">
                        <el-input
                            clearable
                            v-model="form.info"
                            placeholder="请输入选手账号/姓名"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="状态 :">
                        <el-select
                            clearable
                            v-model="form.status"
                            placeholder="请选择状态"
                        >
                            <el-option label="正常" :value="0"></el-option>
                            <el-option label="延时" :value="1"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <button @click="search" class="button-style">搜 索</button>
            </div>
            <div class="btn-group fr">
                <el-form :inline="true">
                    <el-form-item>
                        <div class="button-style" @click="add">
                            &emsp;添 加&emsp;
                        </div>
                    </el-form-item>
                    <el-form-item>
                        <div class="button-style" @click="deleteFn">
                            批量删除
                        </div>
                    </el-form-item>
                    <el-form-item>
                        <el-upload
                            class="avatar-uploader"
                            accept=".xls,.xlsx"
                            :action="`/tes/apply/apply-tea/data-import/${courseId}`"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :on-error="handleAvatarError"
                            :before-upload="beforeAvatarUpload"
                        >
                            <div class="button-style">批量导入</div>
                        </el-upload>
                    </el-form-item>
                    <el-form-item>
                        <a href="/tes/tempfiles/选手导入-组.xlsx">模板下载</a>
                    </el-form-item>

                    <el-form-item>
                        <div @click="downloadFile" class="downloadfile">
                            <i class=""
                                >数据下载<b
                                    class="iconfont icon-tubiaozhizuo-"
                                ></b
                            ></i>
                        </div>
                    </el-form-item>
                </el-form>
            </div>
            <div class="clear"></div>
            <div>
                <span style="margin-right: 10px"
                    >已报名队伍：{{ pNum.groupCount }}</span
                >
                <span>已报名选手：{{ pNum.peopleCount }}</span>
            </div>
            <el-table
                class="chapter-info-table"
                :data="tableData"
                style="width: 100%"
                tooltip-effect="dark"
                @selection-change="handleSelectionChange"
                :span-method="objectSpanMethod"
            >
                <el-table-column type="selection" width="45"></el-table-column>
                <el-table-column
                    prop="groupName"
                    label="参赛队伍"
                    width="100"
                ></el-table-column>
                <el-table-column
                    prop="number"
                    label="编号"
                    width="100"
                ></el-table-column>
                <el-table-column prop="teacherName" label="指导老师" width="90">
                    <template slot-scope="scope">
                        <el-tooltip
                            v-if="scope.row.teacherPhone"
                            effect="light"
                            :content="
                                scope.row.teacherName
                                ? `${scope.row.teacherName}：${scope.row.teacherPhone}`
                                : `${scope.row.teacherPhone}`
                            "
                            placement="top"
                        >
                            <div class="table-item">
                                {{ scope.row.teacherName || '-'}}
                            </div>
                        </el-tooltip>
                        <div class="table-item" v-else>
                            {{ scope.row.teacherName || '-'}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    label="选手姓名"
                    width="100"
                    prop="name"
                ></el-table-column>
                <el-table-column
                    label="账号"
                    width="120"
                    prop="userNumber"
                ></el-table-column>
                <el-table-column label="专业" prop="major"></el-table-column>
                <el-table-column
                    label="班级"
                    prop="className"
                ></el-table-column>
                <el-table-column
                    prop="applyTime"
                    label="报名时间"
                    width="100"
                ></el-table-column>
                <el-table-column label="状态" width="50">
                    <template slot-scope="scope">
                        <div v-if="scope.row.status == 0">正常</div>
                        <div v-if="scope.row.status == 1">延时</div>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button
                            @click="getInfo(scope.row.number)"
                            type="text"
                            size="small"
                            >修改</el-button
                        >
                        <el-button
                            style="margin-left: 0px !important"
                            @click="showDelayed(scope.row)"
                            type="text"
                            size="small"
                            >竞赛延时</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                v-if="tableData.length"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-size="pagesize"
                background
                layout="prev, pager, next"
                :total="totalCount"
            ></el-pagination>
        </div>
        <add-players-teacher ref="addplayers" />
        <!-- 延时弹框 -->
        <el-dialog
            :close-on-click-modal="false"
            title="延时"
            :visible.sync="dialogTime"
            width="600px"
        >
            <el-form
                class="form-add"
                ref="form"
                label-width="100px"
                :model="formAdd"
            >
                <el-form-item label="延时时间：" prop="name">
                    <el-input-number
                        v-model="formDelayed.minute"
                        :min="0"
                        :max="999"
                        step-strictly
                        controls-position="right"
                    ></el-input-number>
                    分钟
                </el-form-item>
            </el-form>
            <div class="footer" style="text-align: center">
                <button class="button-style saveBtn" @click="updateDelayed">
                    确 认
                </button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import addPlayersTeacher from "./addPlayersTeacher";
export default {
    components: {
        addPlayersTeacher,
    },
    data() {
        return {
            dialogAddTitle: "",
            isUpdate: false,
            formDelayed: {
                minute: 0,
                number: "",
            },
            courseId: "",
            //搜索
            form: {
                info: "",
                status: "",
                pageNumber: 1,
                pageSize: 10,
            },
            pagesize: 10,
            currentPage: 1,
            totalCount: 0,
            //添加选手
            formAdd: {
                className: "",
                major: "",
                name: "",
                telephoneNumber: "",
                number: "",
            },
            tableData: [],
            dialogAdd: false,
            dialogTime: false,
            multipleSelection: [],
            fileList: [],
            pNum: {
                groupCount: 0,
                peopleCount: 0,
            },
        };
    },
    created() {
        this.courseId = this.$localstorage.getLocalStorage("setCourseId");
        this.init();
    },
    methods: {
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            if (![4, 5, 6, 7].includes(columnIndex)) {
                if (row.rowNumber === 0) {
                    return {
                        rowspan: row.playerVOList.length,
                        colspan: 1,
                    };
                } else {
                    return {
                        rowspan: 0,
                        colspan: 0,
                    };
                }
            }
        },
        init() {
            this.getList();
            this.getNum();
        },
        //获取选手和队伍人数
        getNum() {
            this.$http
                .post(`/tes/apply/apply-tea/player-info/${this.courseId}`)
                .then((response) => {
                    let res = response.data;
                    if (res.code == "200") {
                        this.pNum = res.data;
                    } else {
                        this.$message.error(res.message);
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        //上传成功
        handleAvatarSuccess(res, file) {
            if (res.code == 200) {
                this.$message.success(res.message);
                this.init();
            } else {
                this.$message.error(res.message);
            }
        },
        //上传失败
        handleAvatarError(res) {
            // this.$message.error(res.message);
        },
        //上传之前校验
        beforeAvatarUpload(file) {
            // 获取到文件的后缀以便于判断文件类型
            let extension = file.name.substring(file.name.lastIndexOf(".") + 1);
            // 判断文件类型
            if (extension !== "xlsx" && extension !== "xls") {
                this.$message.warning("只能上传后缀是.xlsx或者.xls的文件");
                return;
            }
        },
        search() {
            this.form.pageNumber = 1;
            this.init();
        },
        //延时弹框
        showDelayed(row) {
            this.formDelayed.minute = row.delayedTime;
            this.formDelayed.number = row.number;
            this.dialogTime = true;
        },
        //添加关闭清空
        closeDialogAdd() {
            this.formAdd = {
                className: "",
                major: "",
                name: "",
                telephoneNumber: "",
                number: "",
            };
        },

        //删除
        deleteFn(number) {
            //console.log(this.multipleSelection)
            if (this.multipleSelection.length == 0) {
                this.$message({
                    message: "请选择要删除的内容",
                    type: "warning",
                });
                return;
            }
            this.$confirm("是否删除选中?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.$http
                        .post(
                            `/tes/apply/apply-tea/delete-batch/${this.courseId}`,
                            this.multipleSelection
                        )
                        .then(
                            (response) => {
                                let res = response.data;
                                if (res.code == "200") {
                                    this.$message({
                                        message: "删除成功",
                                        type: "success",
                                    });
                                    this.form.pageNumber = 1;
                                    this.currentPage = 1;
                                    this.init();
                                } else {
                                    this.$message.error(res.message);
                                }
                            },
                            (err) => {
                                console.log("err");
                            }
                        );
                    //this.dialogTips = true
                })
                .catch(() => {});
        },
        //修改回显
        getInfo(number) {
            this.$refs.addplayers.showDialog(number);
        },
        //延时修改
        updateDelayed() {
            this.$http
                .post(`/tes/apply/apply-tea/delayed`, this.formDelayed)
                .then((response) => {
                    let res = response.data;
                    if (res.code == "200") {
                        this.dialogTime = false;
                        this.init();
                        this.$message.success(res.message);
                    } else {
                        this.$message.error(res.message);
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        //获取列表
        getList() {
            this.$http
                .post(
                    `/tes/apply/apply-tea/list-group/${this.courseId}`,
                    this.form
                )
                .then((response) => {
                    let res = response.data;
                    if (res.code == "200") {
                        const records = res.data.records;
                        const arr = [];
                        records.forEach((item, index) => {
                            item.playerVOList.forEach((subItem, subIndex) => {
                                subItem.rowNumber = subIndex;
                                const newObj = { ...item, ...subItem };
                                arr.push(newObj);
                            });
                        });
                        this.tableData = arr;
                        this.totalCount = res.data.total;
                    } else {
                        this.$message.error(res.message);
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        //修改提交
        onUpdate() {
            this.$http
                .post(
                    `/tes/apply/apply-tea/update-person/${this.courseId}`,
                    this.formAdd
                )
                .then((response) => {
                    let res = response.data;
                    if (res.code == "200") {
                        this.$message.success(res.message);
                        this.dialogAdd = false;
                        this.init();
                    } else {
                        this.$message.error(res.message);
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        //添加提交
        onAdd() {
            this.$http
                .post(
                    `/tes/apply/apply-tea/save-group/${this.courseId}`,
                    this.formAdd
                )
                .then((response) => {
                    let res = response.data;
                    if (res.code == "200") {
                        this.$message.success(res.message);
                        this.dialogAdd = false;
                        this.init();
                    } else {
                        this.$message.error(res.message);
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        //分页
        handleSizeChange(size) {
            this.pagesize = size;
        },
        handleCurrentChange(currentPage) {
            this.form.pageNumber = currentPage;
            this.currentPage = currentPage;
            this.init();
        },
        handleSelectionChange(val) {
            this.multipleSelection = val.map((item) => item.number);
        },
        add() {
            this.$refs.addplayers.add();
        },
        //数据下载
        downloadFile() {
            let self = this;
            self.$http
                .post(
                    `/tes/apply/apply-tea/data-download/${this.courseId}`,
                    this.form,
                    {
                        responseType: "blob",
                    }
                )
                .then((response) => {
                    let contentType = response.headers["content-type"];
                    let blob = new Blob([response.data], {
                        type: response.headers["content-disposition"],
                    });
                    let url = window.URL.createObjectURL(blob);
                    //let fileName = response.headers['content-disposition'].split(";")[1].split("filename=")[1];
                    let fileName = `数据下载.xls`;
                    let downloadElement = document.createElement("a");
                    downloadElement.style.display = "none";
                    downloadElement.href = url;
                    downloadElement.download = fileName; //下载后文件名
                    document.body.appendChild(downloadElement);
                    downloadElement.click(); //点击下载
                    document.body.removeChild(downloadElement); //下载完成移除元素
                    window.URL.revokeObjectURL(url);
                })
                .catch((err) => {
                    console.log(err);
                });
        },
    },
};
</script>
<style lang="scss">
#players {
    .el-input-number {
        .el-input {
            width: 100%;
            input {
                width: 100%;
            }
        }
        .el-input-number__increase {
            top: 4px;
            line-height: 15px;
        }
        .el-input-number__decrease {
            bottom: 4px;
            line-height: 15px;
        }
    }
    .form-add {
        .el-input {
            width: auto;
            .el-input__count-inner {
                background: none;
            }
        }
    }
}
.filter-wraper {
    .input-wraper {
        margin-top: 20px;
        .el-input__inner {
            width: auto;
        }
    }
}
.el-tooltip__popper {
    max-width: 30%;
    line-height: 22px;
}
.chapter-info-table {
    .table-item {
        line-height: 36px;
    }
}
.chapter-info-table .el-switch__core {
    width: 28px;
    height: 16px;
}
.chapter-info-table .el-switch {
    margin-left: 15px;
}
.chapter-info-table .el-switch.is-checked .el-switch__core::after {
    margin-left: -13px;
}
.chapter-info-table .el-switch__core:after {
    width: 12px;
    height: 12px;
}
</style>
<style scoped>
.imgPost {
    vertical-align: inherit;
    position: absolute;
    right: 17px;
    color: rgb(2, 170, 255);
    font-size: 18px;
    padding-top: 5px;
}
.el-button--small:hover {
    color: #1277eb;
}
.el-tree >>> .el-tree-node {
    margin: 6px 0;
}
.el-form-item >>> .el-input__inner {
    width: 200px;
    height: 32px;
    border-radius: 4px;
}
.el-form >>> .el-textarea__inner {
    height: 200px;
    width: 350px;
    resize: none;
}
.el-form-item {
    margin-bottom: 22px;
}
.el-form-item >>> .el-form-item__content {
    height: auto;
}
.block::-webkit-scrollbar {
    width: 2px;
}
.block::-webkit-scrollbar-thumb {
    background: #dededd;
    border-radius: 50px;
}

.chapterTitle {
    width: 390px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-block;
}
.custom-tree-node {
    padding-top: 10px;
}
</style>
<style lang="scss" scoped>
@import "./../../../styles/ypublic.scss";

.downloadfile {
    color: #1277eb;
    cursor: pointer;
    &:hover {
        opacity: 0.9;
    }
}
.jx-content {
    .courseName {
        font-size: 18px;
    }
    #topic-models {
        padding: 200px 0;
        .button-center {
            text-align: center;
            .button-style {
                text-align: center;
                height: 48px;
                line-height: 48px;
                border-radius: 48px;
                padding: 0 106px;
                margin: 10px;
            }
        }
    }
    .navBox {
        .reportTemplate {
            padding-bottom: 10px;
            margin-left: 190px;
            cursor: pointer;
        }
        .testTemplate {
            padding-bottom: 10px;
            margin-left: 40px;
            cursor: pointer;
        }
        .templateCheck {
            border-bottom: 2px solid $yBlue;
            color: $yBlue;
            cursor: pointer;
        }
    }
    .block {
        margin: 20px 0;
        overflow-y: scroll;
        height: 483px;
    }
    .saveBtn {
        text-align: center;
        margin-top: 10px;
    }
}
</style>
